<style scoped>
</style>

<template>
  <div>
    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="700"
    >
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="140"
        value="true"
        style="padding: 3px 20px"
      >
        <Row>
          <Col span="12">
            <Form-item
              label="配置名称"
              prop="configName"
              :rules="{required: true, message: '必填,1-50位字符',min:1,max:100, trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.configName"></Input>
            </Form-item>
          </Col>
          <Col span="12">
            <Form-item
              label="平台"
              prop="platform"
              :rules="{required: true, message: '必选',min:1,max:100, trigger:'change',type:'number'}"
            >
              <Select v-model="modalForm.platform" clearable >
                <Option :value="1">腾讯云</Option>
               <!-- <Option :value="2">阿里云</Option>-->
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <Form-item
              label="APPID"
              prop="appid"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.appid"></Input>
            </Form-item>
          </Col>
          <Col span="12">
            <Form-item
              label="APPKEY"
              prop="appkey"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.appkey"></Input>
            </Form-item>
          </Col>
        </Row>

        <Row>
          <Col :span="24">
           <Form-item
              label="语音通道"
              prop="voiceChannel"
              :rules="{required: true, message: '必选',min:1,max:100, trigger:'change',type:'number'}"
            >
              <Select v-model="modalForm.voiceChannel" clearable >
                <Option :value="1">AI智能语音</Option>
                <Option :value="2">腾讯云语音</Option>
              </Select>
            </Form-item>
          </Col>

        </Row>

        <Row>
          <Col :span="12">
            <Form-item
              label="火警模板号SMS"
              prop="tempsmsFire"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempsmsFire"></Input>
            </Form-item>
          </Col>
          <Col :span="12">
            <Form-item
              label="故障模板号SMS"
              prop="tempsmsBreakdown"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempsmsBreakdown"></Input>
            </Form-item>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <Form-item
              label="离线模板号SMS"
              prop="tempsmsOffline"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempsmsOffline"></Input>
            </Form-item>
          </Col>
          <Col :span="12">
            <Form-item
              label="拆卸模板号SMS"
              prop="tempsmsUnload"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempsmsUnload"></Input>
            </Form-item>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <Form-item
              label="清除告警模板号SMS"
              prop="tempsmsClear"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempsmsClear"></Input>
            </Form-item>
          </Col>
          <Col :span="12">
            <Form-item
              label="火警模板号voice"
              prop="tempvoiceFire"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempvoiceFire"></Input>
            </Form-item>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <Form-item
              label="故障模板号voice"
              prop="tempvoiceBreakdown"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempvoiceBreakdown"></Input>
            </Form-item>
          </Col>
          <Col :span="12">
            <Form-item
              label="离线模板号voice"
              prop="tempvoiceOffline"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempvoiceOffline"></Input>
            </Form-item>
          </Col>
        </Row>
        <Row>
          <Col :span="12">
            <Form-item
              label="拆卸模板号voice"
              prop="tempvoiceUnload"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempvoiceUnload"></Input>
            </Form-item>
          </Col>
          <Col :span="12">
            <Form-item
              label="清除告警模板号voice"
              prop="tempvoiceClear"
              :rules="{required: true, message: '必填,1-50位字符', trigger:'blur',type:'string'}"
            >
              <Input v-model="modalForm.tempvoiceClear"></Input>
            </Form-item>
          </Col>
        </Row>
        <Form-item
          label="备注"
          prop="remark"
         
        >
          <Input v-model="modalForm.remark"></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
        <Button type="primary" :loading="modalForm_loading" @click="saveForm('modalForm')">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { saveConfig, updateConfig } from "@/api/system";
import { getDeptCascader } from "@/api/system";

export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          configId: "",
          configName: "",
          platform: "",
          appid: "",
          appkey: "",
          tempsmsFire: "",
          tempsmsBreakdown: "",
          tempsmsOffline: "",
          tempsmsUnload: "",
          tempsmsClear: "",
          tempvoiceFire: "",
          tempvoiceBreakdown: "",
          tempvoiceOffline: "",
          tempvoiceUnload: "",
          tempvoiceClear: "",
          remark: ""
        };
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加模板"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      deptCascader: [],
      maintCombo: []
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (curVal) {
        this.modalForm = JSON.parse(JSON.stringify(this.parentForm));
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          let params = JSON.parse(JSON.stringify(this.modalForm));
          try {
            let result;
            if (params.configId) {
              result = await updateConfig(params);
            } else {
              result = await saveConfig(params);
            }
            if (result.code == 0) {
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
